<template>
  <div class="">
    <el-container class="mt-5 main-width container-center">
      <div class="" style="width: 940px;min-width: 940px;padding-right: 40px;" :style="{minHeight: height + 'px'}">
        <p class="topic-details-title">{{topic.data.topicTitle}}</p>
        <p class="list-footer-fs tc">
          <img  v-lazy="info.profilePicture ? info.profilePicture : 'static/morentouxiang.png'" style="height: 20px;border-radius: 50%;">
          <span  style="margin-right: 20px;">{{info.nickName ? info.nickName : info.username}}</span>
          <time class="time" style="margin-right: 20px;">{{$formatDateTime(topic.data.ctime)}}</time>
          <span class="el-icon-view"></span><span class=""  style="padding-top: 3px;margin-right: 15px;">{{info.browseNumber}}</span>
          <span class="el-icon-edit-outline"></span><span class="" >{{info.comments}}</span>
        </p>
        <div class="topic-details-content" style="padding-top: 20px;" v-html="topic.data.topicContent"></div>
        <div class="fr">
          <el-button type="success" plain round @click="liked()" style="margin-bottom: 20px;" :loading="likeloading">
            <span>{{topic.like === 0 || topic.like === '0' ? '点赞' : '已点赞'}}</span> |
            <span>{{topic.likeNumber}}</span>
          </el-button>
        </div>
        <div class="" v-if="topic.data.isComment === 'YES'">
          <topic-comments :coms.sync="topic.comment" :info="info"></topic-comments>
        </div>
      </div>
      <el-aside width="280px">
        <recommend-topic></recommend-topic>
      </el-aside>
    </el-container>
    <back-top></back-top>
  </div>

</template>

<script>
import axios from 'axios'
import TopicComments from './TopicComments'
import RecommendTopic from './RecommendTopic'

let getAllTopic = async function (self, info) {
  self.info = info
  let obj = {topicId: info.modelId}
  if (self.$store.state.user.isLogin) {
    obj.userId = self.$store.state.user.user.user.userId
  }
  // 话题内容
  let resEc = await axios.post('/mscs/topic/findTopicContentById', self.$paramsConvert(obj))
  self.topic = Object.assign({}, self.topic, resEc.data.data)
  // 获取评论内容
  let resComment = await axios.post('/mscs/topic/findCommentByType', self.$paramsConvert(obj))
  self.topic.comment = resComment.data.data
}

export default {
  name: "topic-details",
  title: "话题详情",
  data () {
    return {
      info: {},
      topic: {
        data: {},
        like: '0',
        likeNumber: 0,
        comment: {}
      },
      likeloading: false // 点在的按钮禁止
    }
  },
  mounted () {
  },
  methods: {
    // 点赞
    liked () {
      if (!this.isLogin) {
        this.$openLogin()
      } else {
        this.likeloading = true
        axios.post('/mscs/topic/userLikeOrCancel', this.$paramsConvert({
          type: (this.topic.like === 0 || this.topic.like === '0') ? 'LIKE' : 'CANCEL',
          topicId: this.info.modelId || this.info.topicId,
          userId: this.$store.state.user.user.user.userId
        })).then((res) => {
          if (res.data.code === 1) {
            if (this.topic.like === 0 || this.topic.like === '0') {
              this.topic.like = 1
              this.topic.likeNumber = parseInt(this.topic.likeNumber) + 1
            } else {
              this.topic.like = 0
              this.topic.likeNumber = parseInt(this.topic.likeNumber) - 1
            }
          }
        }).catch((error) => {
          // debugger
          this.$catchError(error)
        }).finally(() => {
          this.likeloading = false
        })
      }
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      getAllTopic(vm, to.query).then(res => {}).catch(error => {
        vm.$catchError(error)
      })
    })
  },
  computed: {
    isLogin () {
      return this.$store.state.user.isLogin
    },
    height () {
      let height = this.$store.state.height.client - this.$store.state.height.header - this.$store.state.height.footer
      return height < 500 ? 500 : height
    },
    isVip () {
      return this.$store.state.user.user &&
      (this.$store.state.user.user.user.userType === 'MEMBER' || this.$store.state.user.user.user.userType === 'CMEMBER') &&
      this.$store.state.user.user.memberStatus === "NORMAL" &&
      this.$store.state.user.user.paymentStatus === "ALREADY"
    },
  },
  components: {
    TopicComments,
    RecommendTopic
  }
}
</script>

<style>
  .topic-details-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
  }
  .topic-details-content img {
    max-width: 100%;
    height: auto;
  }
</style>
